Maak zelf een (geboorte)site 


Pas geboren en al on 


Er is een baby op komst en de hele wereld mag het weten. Het liefst nog zou je het van de 


daken schreeuwen. Misschien is een website dan een leuke manier om je vrienden en ken- 
nissen op de hoogte te houden van de zwangerschap en van je baby's eerste levenswandel. 
Omdat de voorbereidingen van je baby's komst al genoeg tijd in beslag nemen, tonen wij je 
hoe je zo’n website in een uurtje in elkaar steekt. 


Stap 1 
Downloaden en installeren 


Als je al paniekrimpels krijgt bij het horen van het woord ‘html’ al- 
leen, kan CuteSiteBuilder een alternatief bieden. Dit programma 
maakt ingewikkelde codes overbodig. Je ziet onmiddellijk op je 
scherm hoe je website eruit zal zien, en de rest is klik- en plakwerk. 
Om de trialversie van CuteSiteBuilder te downloaden moet je eerst 
een formuliertje invullen op [ www.globalscape.com/downloads/ 
cutesitebuilder.asp |. Daarna krijg je onmiddellijk een mailtje toe- 
gestuurd met de downloadlink. Je kan CuteSiteBuilder een maand 
gratis uitproberen, daarna kost het pakket je $ 69,95. De installa- 
tie verloopt heel een- 

woven als ee 
programma opent, 

O Start with a wizard OK krijg je een kader 


Need a web site fast? Use this 
step-by-step wizard to quide you 
through the process. 


Cancel 


Help 
@ Start with a template 


Templates include customizable 
pages and links designed for 
different types of web sites. 


O Open an existing web site file 


CuteSiteBuilder lijkt ingewikkeld, maar is 
echt het proberen waard! 


Stap 2 
Kies een ontwerp 


met de optie om het 
programma te ko- 
pen. Klik gewoon op 
CONTINUE TRIAL. 
Daarna krijg je een 
nieuw kadertje met 
drie opties. Kies hier 
voor de middelste 
optie: START WITH A 
TEMPLATE en klik op 
OK. 


Hierna krijg je alweer een kadertje voorgeschoteld. Dit kadertje 
dient om de lay-out van je website te kiezen. Bij SELECT A 
TEMPLATE kies je voor (None). Als je voor één van de andere opties 
kiest, legt het programma al een webpaginastructuur vast en het 
is niet eenvoudig om die daarna te wijzigen. Bij DOCUMENT DESIGN 
TO START WITH gaan we wel al een lay-out van onze webpagina kie- 
zen. Je kan de mogelijkheden onmiddellijk bekijken. Wij kozen 
voor het babyzachte PROFESSIONAL BLUE. Alleen kan dat blauw wel 
misleidend zijn voor het geslacht van de baby natuurlijk… 
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New CuteSITE Builder File (x) 


v Browse. 


Path: C:\Program Files\GlobalSCAPE\CuteSITE Builder\webDesigns 


Look In: | Web Documents Designs 


Select a template: 


CE „| Optional You can pre-populate 
\Web Wizard your web site with a basic 

| Business structure, depending on the type 
| Business with Detail of web site you want to create. 
|Family 

| Multi Purpose 

| Organization 


| Team Schedule Ad 


2 Document design to start with: {Click here for more templates 


| Corporate Yellow A OK 
B 
‘Folder 

|Hot Tamale 


| Mint =I 
| Professional Black 
| Professional Blue 


\Redline_ 


E 


CuteSiteBuilder geeft je de keuze tussen verschillende leuke lay-outs. 


Stap 3 
Andere links 


Hoewel de lay-out er op het eerste zicht verrukkelijk uitziet, raden 
we toch aan om hem eerst wat bij te werken. Zo wilden wij graag de 
links naar de subpagina's in het blauwe frame links zien staan. Om- 
dat CuteSuiteBuilder die zelf bovenaan plaatst, moet je het dan maar 
zelf handmatig aanpassen. Daarvoor ga je naar het menu FORMAT en 
kies je voor Eprr PAGE LAYOUTS. Je ziet meteen dat het donkere vak 
boven je blauwe website veranderd is. Om de webpagina nu aan te 
passen zet je je cursor in de blauwe strook links. Dan kies je in het 
menu LINK voor CREATE List FROM en daarna kies je voor CURRENT 
PAGE’s SEQUENCE. Je krijgt een kader waarin je kan kiezen hoe je lijst 
eruit moet zien. Wij kozen voor een lijst onder elkaar gerangschikt 


ES Insert Tools Table Help 


peen EME 


mre =e 


Link to a Page. 
Link to URL or File 


Create List from 


Current Page's Sequence 
Another Sequence. 


namme el 


Je kan de lay-out gemakkelijk bijwerken, 
al moet je natuurlijk wel weten hoe. 


Create Navigational Link. 


met een bolletje naast 
de actieve pagina. Na je 
keuze klik je op OK. Je 
zou nu in je linkerfra- 
me wat tekst moeten 
krijgen. Klik nu links 
boven je webpagina op 
FINISHED. 


line 


Stap 4 

Op één lijn 

Het allerbelangrijkste bij het maken van een site, is dat je structuur 
goed op poten staat. Iets wat je met CuteSiteBuilder redelijk een- 
voudig zelf kan doen. Hiervoor heb je de kaart nodig: de zwarte strook 
boven je (blauwe) webpagina. Daar staat één geel vierkantje, die de 
actieve webpagina voorstelt. Klik nu met je rechtermuisknop op het 
vierkantje en kies voor IN- 
File Edit View Format Map Link Insert Tools Table Help SERT SEQUENCE. Er zaleen 
lijntje verschijnen. Dat is 
de lijn van je website. Als 
je gele vakje niet duidelijk 
op deze lijn staat, versleep 
dan het lijntje tot dat wel 
zo is. De nieuwe pagina’s 
die we nu gaan toevoegen 
komen allemaal op deze 
lijn te liggen. 


Odo là & = 


Title 1 
Type content here 


—-_— 


In de kaart leg je de structuur van je 
website vast. 


Zorg dat je website op 
het rechte pad blijft. 


Stap 5 
Pagina's aanmaken 


Voor we aan de inhoud van de website beginnen, maken we alle pa- 
gina’s aan die we nodig hebben. Daarvoor maak je op voorhand best 
al een lijstje met wat er allemaal op je website moet komen. Om een 
nieuwe pagina aan te maken klik je in de kaart (de zwarte strook) met 
je rechtermuisknop op het gele vakje (de actieve pagina) en kies je 
voor INSERT PAGE. Nu krijg je een kadertje waarin je een titel en een 
lay-out voor je pagina kan kiezen. Van de lay-out blijf je best af, maar 
een titel voor je webpagina vul je natuurlijk wel in. Op de kaart komt 
voor elke nieuwe pagina een nieuw vakje. Zorg ervoor dat dit vakje 
op het lijntje komt te staan. Als dit niet zo is versleep je het vakje tot 
het correct is. Herhaal deze stap voor elke pagina die je wil aanma- 
ken. Enkele ideeën voor pagina’s kunnen zijn: fotoalbum, hoe het 
begon, praktische info, de laatste nieuwtjes … Zorg dat je pagina’s in 


Te dejuiste volg- 
Í 
Insert New Page | a & orde staan. 
EEE [ze] Als je alle pa- 
Title of Page: Hoe het allemaal begon… gina’s hebt 


aangemaakt, heb je de 
kaart niet meer nodig en 
kan je hem met het 
icoontje in je werkbalk 
met een klikje doen ver- 
dwijnen. 


Page Layout: ‘Text 


Pagina's aanmaken en hen een naam 
geven wordt kinderspel. 


SNEL EEN GEROORTESITE MAKEN 


Stap 6 
Titels en tekst 


Nu de structuur en de lay-out van onze webpagina helemaal op po- 
ten staat kunnen we aan de inhoud van onze site beginnen. Als je bij 
het aanmaken van je pagina’s telkens een titel hebt opgegeven kan 
je deze stap eigenlijk overslaan. Alleen heeft je allereerste pagina 
waarschijnlijk nog geen naam. Om die een naam te geven klik je hem 
aan (Trrre 1) in het lin- 
kerkader van de blauwe 
website. In het witte deel 
van je webpagina krijg je 


Onze ba , nome 


nu een blanco pagina met nel 
bovenaan Title 1. Selecteer en EEE 
de titel en vervang ze door Itels bewerken aoe je met een Klik op ade Knop. 


de naam van je site, bijvoorbeeld ‘onze babysite’. Tekst in je webpa- 
gina krijgen is met CuteSiteBuilder ook erg eenvoudig. Gewoon klik- 
ken en typen is de boodschap. Typ onder je nieuwe titel een kleine 
inleiding voor je pagina. Als je deze tekst nu selecteert kan je hem 
met de werkbalk tekstbewerking gemakkelijk invetten, cursief ma- 
ken of onderlijnen. Je kan ook een ander lettertype of een andere let- 
tergrootte kiezen. 


Hr, 
dl) 
hl 


sle wl B{zju |= zm 


il 
wil 


(Pace Body tent] vil Arial 
Tekst in je website voegen en bewerken is zo simpel als in een tekstver- 
werker. 


HTML: Hypertext Markup Language. Een soort computertaal 
waarmee webpagina's worden aangemaakt. Eigenlijk zijn Html- 
pagina’s gewone tekstpagina’s met allerlei codes die verwijzen 

naar de kleur, de beelden, de opmaak, het geluid waarmee deze 
pagina’s op een browser worden getoond. 
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Onze ba | Hoehetheaon… | Foto-album | praktisch | Delaatstenieuwtes | links | gastenboekje 


Stap 7 
Een figuur invoegen 


Om je webpagina wat aantrekkelijker te maken zijn afbeeldingen 
natuurlijk heel belangrijk. Je kan babycartoons zoeken op het net 
om je site wat op te fleuren. Op [ www.cartooncottage.com | en op 
[ www.designedtoat.com/baby.shtml | vind je enkele gratis baby- 
cartoons. Om de cartoons ergens in je pagina te krijgen klik je in 
het menu INSERT op PICTURE en daarna op IMAGE/CLIPART (of op ANI- 
MATED GIF als het om een 
bewegend prentje gaat). Het 


Insert Image/Clipart 


ne en Eran E kan ook eenvoudig door in de 
Ee werkbalken op het icoontje 
ootrie App IMAGE te klikken. In het 
venster dat je nu krijgt, geef 

je aan welk figuurtje moet 
Bestendsnaam: \gibnchat worden ingevoegd. Daarna 
Bestandstypen: |Allmage Fles Y klik je op OPENEN. Je ziet het 
Previn (ootens) Cl init mage sie in ii) figuurtje onmiddellijk staan. 


Wat ook heel leuk kan zijn 
voor je babysite is een fotoal- 
bum met digitale kiekjes van 
de trotse ouders, echografieën 
en later foto’s van de baby. 
Hiervoor maak je wel best 
een nieuwe webpagina aan. 


w] Show details 

Image Width: 75 pisels 
Image Height: 150 pixels 
Image Color Depth: 8 bits/pisel 
Animated GIF 


Image Type: 


Leuke afbeeldingen of foto's maken je 
webpagina een stuk aantrekkelijker. 


Stap 8 
Tabellen en cellen 


Als je je cartoons naast je tekst wil plaatsen heb je een tabel nodig. 
Kies in het menu TABLE voor INSERT TABLE. In het kader dat je nu 
krijgt, kan je het aantal rijen en kolommen kiezen. Wij kozen voor 
r rij en 2 kolommen. Klik daarna op OK. Je zal meteen zien dat je 
een tabel krijgt. Versleep nu cartoons en tekst naar een verschil- 
lende cel. Als de tabel niet breed genoeg is, kan je die gemakkelij- 
ker verbreden door op de tabelrand te klikken en die te verslepen. 
Wil je die lelijke boord van je tabel onzichtbaar maken, klik dan 
met je rechtermuisknop op de tabel. Kies voor PROPERTIES en dan 
voor TABLE. Vink het vakje met SHow BORDERS uit en klik op OK. 


Onze babysite 


_ op onze babysite. Nog enkele weekjes geduld en onze derde spruit 
zief dan zijn (of haar?) eerste levenslicht. Tof het zover is kunnen jullie op 
\deze site op de hoogte blijven van ‘onze’ zwangerschap. 


Groetjes en veel liefs 
Thomas en Marijke 


Met een tabel kan je je afbeeldingen naast je tekst plaatsen. 


Stap 9 
Links naar websites 


Wil je dat je bezoekers naar een andere website kunnen klikken of 
dat ze je een mailtje kunnen sturen? Dan kan je een link invoegen. 
Selecteer gewoon de tekst of de figuur die moet verwijzen naar een 
andere site of naar een emailadres. Ga naar het menu LINK en kies 
voor CREATE LINK TO URL or Fire. Wil je dat je link naar een webpa- 
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Link Properties gina verwijst? Typ dan in het 
| Taroetand Dipl | kader het webadres in. Wil je 
Lik Te: [arro [ een link naar je emailadres? 
(maito Bebysie@maibe Kies dan in het vakje Link To 


voor Mair To. Typ nu in het 
vakje eronder naast MAILTO: 


Link description: | Selection hd 
je emailadres. Klik daarna op 
OK. Als je nu op de tekst of 
het figuurtje klikt kan je een 


mailtje sturen of ga je naar 
een andere website. 


Krijg je graag mail? Voeg dan een link 
in naar je emailadres. 


Stap 10 
Ondervraag je bezoekers 


Met wat je tot nu toe geleerd hebt kan je al een mooie website in el- 
kaar boksen. Maar omdat het altijd wat pittiger mag, tonen we je 
nog enkele extra’s die je aan je webpagina kan toevoegen. Wordt het 
gj een jongen of een meisje? Welke 
namen kan je je kind geven? Het 
ennn EEn kan leuk zijn om te weten wat je 
den teekanebesnmreaeasroraton | bezoekers ervan denken, bijvoor- 
aeta beeld door een enquête op te stel- 
len. Dat kan gratis op | www.en- 
quete.be |. Om van je website naar 
a | je enquête te linken, genereert en- 
quete.be een html-code voor je. Je 
hebt de keuze tussen vier opties: 
de enquête verschijnt bij het laden 
van de site of bij het verlaten van 
de site, bij het laden van de site 
wordt gevraagd of je wil meedoen, 
of er wordt een gewone link ge- 
plaatst naar je enquête. Het een- 
voudigste is om voor deze laatste 
optie te kiezen. De code die en- 
quete.be voor je aanmaakt, kopieer 
je. Dan ga je in CuteSiteBuilder 
naar de plaats waar je je link wilt. Klik op INSERT en op HTML Cope. 
Plak nu je code in het venster en klik op INSERT. Je zal een figuur 
krijgen waarop HTML staat. Als je je webpagina later bekijkt zal 
daar de link naar de enquête verschijnen. 


Insert your own HTML 


Type or paste HTML inta this text box: 


Files for this component… 


Chaose a placeholder image: 


ML n 
Double eliek to 
edit the HTML. 


al 


Je kan ook html-code toevoegen, 
waardoor je heel wat extra's ín 
je website kan stoppen. 


GUESTBOOK.DE W | 


Get your own free guestbook! 


Stap 1 1 Babysite Gastenboek 
Wie komt er op 


bezoek? 


Info: O berichten op 1 Pagina(s) 
2 hies sinds 2003-03-31 07:54:14 


Je naam: Je ema. 


Watookergleukkanzijniseen tems 
5 5 A hap 
gastenboekje waarin je bezoe- — … rantinrn 


kers allerlei commentaren kun- 
nen achterlaten. Zo’n gasten- 
boek kan je gratis aanmaken 
op verschillende sites. Wij 
kozen voor een gastenboekje op 
[ http://two.guestbook.de |. Na 
registratie krijg je een url van je 
gastenboekje. Je moet dus en- 


en) 
< Vonge pagina | 1 | Volgende pagina > 
Een gastenboek kost je niets en 


het is heel leuk voor jou en voor 
de bezoekers van je site. 


* Huidige pagina: 1 


O HTML © TET 


kel een link maken vanop je 
webpagina en klaar is Kees. 
Waarom zou je je website niet sa- 
men met jou laten aftellen naar 
de dag van de geboorte. Op het 
net kan je verschillende af-tellers 
vinden. Zo kan je er een aanma- 
ken op [ www.rentadabo.nl | onder gadgets. Je moet alleen de ei- 
genschappen voor de teller invullen en de code wordt voor jou ge- 
genereerd. Die plak je dan gewoon in je webpagina met INSERT — 
HTML-cope en je teller verschijnt op je pagina. 


Aantal dagen fot onze spruit er is: 


Laat je website mee aftellen tot 
de grote dag. 


Stap 12 
Je website bekijken 


Als je website eindelijk af is wil je natuurlijk het eindresultaat kun- 
nen zien in je browser en je site publiceren op het net. Iets wat met 
CuteSiteBuilder ook heel simpel kan. Ga naar Fire — PREVIEW WEB 
Srre. Als je website nog niet opgeslagen is, zal CuteSiteBuilder vra- 
gen om de veranderingen op te slaan. Klik op OK. Je webpagina 
zal nu verschijnen in je browser. 


nze babysite _Micreselt Internet Lxplore 
Benard Bewerken beeld Faromten Otra ted 

> 2 MED Pae Jroen Sram @ Cp Br 
on ©) Cpoosmerts and sattnger Aha Magaarelkoc Saer Tech rde hed 


Weikorn op onze babysile Nog enkele weekjes geduid en onze derde spruil 
zool dan zijn (of haar?) eerste levensticht To! het zover is kunnen jullie op 
deze sle op de hoogle blijven van ‘onze’ zwangerschap. 


Groetjes en veel hofs 
Thomas en Marijke 


Word! het ean jongen of een meisje? Vul onze enquête in: 
Enquete 


Het resultaat is vanuit je browser nog méér de moeite waard. 


Stap 13 
Tonen aan de wereld 


En dan komt het einddoel in zicht: je website op het net plaatsen. 
Eerst heb je natuurlijk webruimte nodig. Heel waarschijnlijk heb 
je webruimte bij je internetprovider. Als dat niet zo is, ga je op zoek 
naar gratis webruimte. Op [ www.mijnhomepage.nl/homepa- 
ge.php | vind je een overzichtje van verschillende gratis homepa- 
ge providers. Zorg ervoor dat je je inschrijft bij een provider met 
fip-ondersteuning. Heb je je webruimte? Zorg dan dat je de gege- 
vens bij de hand hebt (login, paswoord en ftp-adres) om je site op 
het net te plaatsen. 

Nadat je je website bekeken hebt krijg je in CuteSiteBuiler een ka- 
der met Preview Your Wegsire. Heb je dit kader per ongeluk ge- 
sloten? Geen probleem, je kan het terughalen door naar Fire — Pu- 
BLISH WEB SITE te gaan. Klik nu op de knop PuBusn. In het eerste 
kader dat je krijgt, vul je een naam voor je verbinding in. Dat kan 
bijvoorbeeld de naam van je provider zijn. Klik daarna op NExT. Nu 


moet je het FTP-HOSTADRESS invullen. Dat kan je terugvinden bij je 
inschrijvingsgegevens. Op de website van je provider vind je ook 
de nodige gegevens terug. Klik op NEXT. In het volgende kader geef 
je je loginnaam en je wachtwoord op. Klik alweer op NEXT. Geef nu 
de map op waar je webruimte zich bevindt. Het kan zijn dat je deze 
stap niet hoeft in te vullen. Klik nu weer op NExr. Vul het volledi- 
ge adres in van je website. Klik op NEXT, controleer of alle infor- 
matie klopt en klik op Finisn. Als alles goed loopt wordt je websi- 
te nu gepubliceerd. Lukt het niet? Kijk dan de gegevens die je in- 
gevuld hebt na. 


Publish Web Site 


FTP Site Name: <None: Select Options, Host Setup, and Add New Site.> Publish 


Web Site URL: <lnknown> 


Web site Options changed, ready to Preview or Publish. vie >te 


Size of Site: Preview or Publish the site to get size information. 


Status: 


Om je website op het net te plaatsen heb je geen nieuw programma nodig. 


Stap 14 
Waar is html? 


Een groot nadeel aan CuteSiteBuilder is dat het zijn webpagina’s 
bewaart met de extensie tlx. Wil je de pagina’s vanop je harde schijf 
met je browser bekijken, dan moet je je webpagina ‘publiceren’ op 
je harde schijf. Dat doe je zo: ga weer naar het menu Fire en kies 
voor PuBLIsH WEB Sire. Kies voor Options. In het tabblad HTML 
DIRECTORY vink je het vakje SAVE coPY oF EXPORTED HTML LOCAL- 
LY aan. Klik op BRowsE om de map te selecteren waar je html-do- 
cumenten moeten komen. Klik daarna twee keer op OK. Ten slot- 
te druk je op PuBrisH en je webpagina’s zullen ook gepubliceerd 
worden op je harde schijf. 


FIP Site Options 


| Site Navigation | Host Setup | HTML Directory | 


Save copy of exported HTML locally 


(C:\Documents and Settings\Clicks | 


HTML directory: lindexBabysite | 


Export to: 


Wil je een kopie in html op je harde schijf? Geen probleem! 


— Wendy Debels — 


FTP: File Transfer Protocol. Het protocol dat wordt gebruikt op een netwerk 
om bestanden binnen te halen (downloaden) of te plaatsen (uploaden). 
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